<template>
  <div>
    <!-- 头部 -->
    <div class="dark-top">
      <a class="page-back" @click="goback"><div></div></a>
      <div class="page-title">
        <font style="vertical-align: inherit;">支付</font>
      </div>
    </div>
    <!-- 二维码 -->
    <div class="dark-head">
      <a :href="code" download="支付收款码">
        <div :style="{ backgroundImage: 'url(' + code + ')' }"></div>
      </a>
    </div>
    <!-- 内容 -->
    <div class="dark-content">
      <div class="cont-title">扫码支付</div>
      <div class="cont-brief">支付完成后截图支付凭证并上传，等待审核</div>
    </div>
    <!-- 上传图片 -->
    <div class="dark-photo">
      <!-- 上传后 -->
      <div class="phone-content" v-show="isPhone">
        <div
          class="rele-back"
          :style="{ backgroundImage: 'url(' + uploadfile.url + ')' }"
        ></div>
        <div class="rele-del" @click="ossDeleteImg(uploadfile.name)"></div>
      </div>
      <!-- 上传前 -->
      <div class="phone-bef" v-show="isBrefPone">
        <div class="phone-img">
          <div>
            <input type="file" id="uploadImage" @change="toUploads" />
          </div>
        </div>
        <span class="rele-add">上传支付凭证</span>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="dark-button" @click="payStudentMyInfo">确认上传</div>
    <!-- <div class="dark-help">帮助文档</div> -->
    <div class="agreement">
      <span
        :class="radioClose"
        id="radio"
        checked="checked"
        @click="closeRadio(radioClose)"
      ></span>
      <span>
        <span @click="closeRadio(radioClose)">请先阅读并同意</span>
        <span style="color: #ff0000;" @click="goPayAgreement"
          >《用户隐私协议》</span
        >
      </span>
    </div>
  </div>
</template>
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
<script>
const OSS = require("ali-oss");
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      payId: "", //报名id
      code: "",
      uploadfile: { url: "", fileUrl: "", name: "" },
      signaturen: [],
      radioClose: "radio-close",
      dealRadio: false,
      isPhone: false,
      isBrefPone: true
    };
  },
  created() {
    this.payId = localStorage.sign_orderId;
    if (this.$route.params.agreementStatus) {
      this.closeAgree();
      this.dealRadio = true;
    }
    this.selectPayCode();
    this.ossSignaturen();
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    //协议
    goPayAgreement() {
      this.$router.push({
        name: "Agreement"
      });
    },
    closeRadio(val) {
      //从开到关
      if (val == "radio-open") {
        this.radioClose = "radio-close";
        document.getElementById("radio").setAttribute("checked", "");
        this.dealRadio = false;
      }
      //从关到开
      if (val == "radio-close") {
        this.goPayAgreement();
        // this.radioClose = "radio-open";
        // document.getElementById("radio").setAttribute("checked", "checked");
      }
    },
    closeAgree() {
      this.radioClose = "radio-open";
    },
    //获取收款码
    selectPayCode() {
      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post("/api/apply/pay_code", { emulateJSON: true })
        .then(kun => {
          //console.log(kun);
          Indicator.close();
          if (kun.code == 200) {
            me.code = kun.data.code;
          } else {
            Toast(kun.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    toUploads() {
      let me = this;
      const urls = [];
      //oss 基本配置
      var client = new OSS({
        region: this.signaturen.region,
        endpoint: this.signaturen.region,
        accessKeyId: this.signaturen.accessKeyId,
        accessKeySecret: this.signaturen.accessKeySecret,
        bucket: this.signaturen.bucket
      });

      //获取文件信息
      const files = document.getElementById("uploadImage");
      if (files) {
        const fileLen = document.getElementById("uploadImage").files;
        const file = document.getElementById("uploadImage").files[0];
        let consat = file.name;
        let name = "paysign/" + this.random_string(12) + fileLen[0].name; //上传的文件地址
        for (let i = 0; i < fileLen.length; i++) {
          const file = fileLen[i];
          client
            .put(name, file)
            .then(res => {
              console.log(res);
              me.uploadfile.url = res.res.requestUrls[0];
              me.uploadfile.fileUrl = res.res.requestUrls[0];
              me.uploadfile.name = res.name;
              me.isPhone = true;
              me.isBrefPone = false;
              Toast("上传成功");
            })
            .catch(err => {
              console.log(err);
            });
        }
      }

      this.$emit("getUploadData", this.uploadfile);
    },
    //生成随机名字
    random_string(len) {
      len = len || 32;
      var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
      var maxPos = chars.length;
      var pwd = "";
      for (let i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos));
      }
      return pwd;
    },
    ossSignaturen() {
      //oss签名验证

      let me = this;
      this.$axios
        .post("/api/index/oss_ali", {
          emulateJSON: true
        })
        .then(kun => {
          console.log(kun);
          me.signaturen = kun.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //oss删除图片
    ossDeleteImg(val) {
      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post("/api/index/deletePic", { img: val }, { emulateJSON: true })
        .then(kun => {
          console.log(kun);
          Indicator.close();
          if (kun.code == 200) {
            me.isPhone = false;
            me.isBrefPone = true;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //支付上传截图
    payStudentMyInfo() {
      if (this.dealRadio === false) {
        Toast("请阅读用户协议");
        this.goPayAgreement();
        return false;
      }
      if (this.uploadfile.url == "") {
        Toast("需要先上传支付截图");
        return false;
      }
      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post(
          "/api/apply/pay_apply",
          {
            uid: localStorage.uid,
            aid: this.payId,
            picture: this.uploadfile
          },
          { emulateJSON: true }
        )
        .then(kun => {
          console.log(kun);
          Indicator.close();

          if (kun.code == 200) {
            me.goMyOrder();
          } else {
            Toast(kun.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //支付成功后 跳 我的订单
    goMyOrder() {
      sessionStorage.setItem("orderIndex", "payinfo");
      this.$router.push({
        name: "MyOrder"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.box_left {
  float: left;
}
.box_right {
  float: right;
}
//头部
.dark-top {
  width: 100%;
  height: 2.75rem;
  color: #1a1a1a;
  position: relative;

  /* 设置渐变 */
  background: rgb(255, 0, 0); /* Old browsers */
  background: -moz-linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

  .page-back {
    width: 0.5625rem;
    height: 0.9375rem;
    text-decoration: none;
    color: #1a1a1a;
    display: inline-block;
    position: absolute;
    left: 0.9375rem;
    top: 1.0625rem;

    :first-child {
      width: 100%;
      height: 100%;
      background-image: url(../../assets/login/return-white.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      overflow: hidden;
    }
  }

  .page-title {
    font-size: 1.125rem;
    color: #ffffff;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 0.65rem;
    -ms-transform: translateX(-50%) translateY(0); /* IE 9 */
    -moz-transform: translateX(-50%) translateY(0); /* Firefox */
    -webkit-transform: translateX(-50%) translateY(0); /* Safari 和 Chrome */
    -o-transform: translateX(-50%) translateY(0); /* Opera */
  }
}

//二维码
.dark-head {
  width: 21.5625rem;
  margin: 0.9375rem auto 0;
  height: 21.5625rem;

  :first-child {
    width: 100%;
    height: 100%;
    background-image: url(../../assets/shop/pay.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
}

//文章内容
.dark-content {
  width: 21.5625rem;
  margin: 0.625rem auto 0;
  text-align: center;
  .cont-title {
    font-size: 1.125rem;
    color: #ff0000;
  }
  .cont-brief {
    font-size: 0.9375rem;
    color: #343434;
    margin-top: 0.625rem;
  }
}

//上传截图
.dark-photo {
  width: 18.75rem;
  height: 9.375rem;
  margin: 1.625rem auto 0;
  border: 0.03125rem solid #e1e1e1;
  border-radius: 0.1875rem;
  overflow: hidden;

  //上传后显示
  .phone-content {
    width: 100%;
    height: 100%;
    position: relative;

    .rele-back {
      width: 100%;
      height: 100%;
      background-image: url(../../assets/shop/single-sign.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
    .rele-del {
      width: 0.875rem;
      height: 0.875rem;
      position: absolute;
      top: 0.3125rem;
      right: 0.3125rem;

      background-image: url(../../assets/login/rele-del.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      overflow: hidden;
    }
  }
  //上传前
  .phone-bef {
    width: 100%;
    height: 100%;
    position: relative;

    .phone-img {
      width: 3.5rem;
      height: 3.5rem;
      margin: 2.9375rem auto 0.5625rem;

      :first-child {
        width: 100%;
        height: 100%;
        background-image: url(../../assets/shop/phone-cl.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow: hidden;

        input {
          //将input设为透明
          opacity: 0;
        }
      }
    }

    .rele-add {
      font-size: 1.125rem;
      color: #cccccc;
      position: absolute;
      left: 50%;
      -ms-transform: translateX(-50%) translateY(0); /* IE 9 */
      -moz-transform: translateX(-50%) translateY(0); /* Firefox */
      -webkit-transform: translateX(-50%) translateY(0); /* Safari 和 Chrome */
      -o-transform: translateX(-50%) translateY(0); /* Opera */
    }
  }
}

//按钮
.dark-button {
  margin: 1.375rem auto 0;
  width: 21.5625rem;
  height: 3.0625rem;
  border-radius: 1.5625rem;
  font-size: 1.125rem;
  color: #ffffff;
  text-align: center;
  line-height: 3.0625rem;

  /* 设置渐变 */
  background: rgb(255, 0, 0); /* Old browsers */
  background: -moz-linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 30%,
    rgb(229, 39, 77) 80%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

  input {
    display: inline-block;
    opacity: 0;
    width: 100%;
    position: relative;
    top: -3.125rem;
  }
}

//帮助文档
.dark-help {
  width: 21.5625rem;
  margin: 0.875rem auto 0;
  text-align: center;
  font-size: 0.9375rem;
  color: #ff0000;
}
//协议
.agreement {
  color: #4d4d4d;
  font-size: 0.9375rem;
  margin: 0.875rem auto 3.125rem;
  text-align: center;

  .radio-close {
    width: 0.75rem;
    height: 0.75rem;
    border: 0.0625rem solid #999999;
    display: inline-block;
    margin-right: 0.625rem;
    border-radius: 0.375rem;
    position: relative;
    top: 0.125rem;
  }
  .radio-open {
    width: 0.75rem;
    height: 0.75rem;
    border: 0.0625rem solid #ff0000;
    display: inline-block;
    margin-right: 0.625rem;
    border-radius: 0.375rem;
    position: relative;
    top: 0.125rem;
    background-color: #ff0000;
    background-image: url(../../assets/login/gou.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
}
</style>
